@function r($px) {
    @return $px/40*1rem;
}
.web{
    background: #000000;
    width: 100%;
    height: 100%;
    .header{
        height: 100%;
         width: 100%;
         background: black;
         
         .guanbi{
             width: 14%;
             padding:r(10);
             display: inline-block;

             img{
                 width:r(60);
               height:r(60);
                 vertical-align: middle;
                 padding-left: r(20);
             }
         }
         .shousou{
             display: inline-block;
             border: r(2) solid white;
             width: 75%;
             border-radius: r(40);
             
             img{
                 width: r(30);
                 height: r(30);
                 padding-left: r(10);
                 vertical-align: middle;
             }
             input{
//              background: #000000;
                 width: r(400);
                 height: r(37);
                 border: none;
                 vertical-align: middle;
                 background: #000000;
             }
         }
     }
     .fabu{
        img{
            width: 100%;
        }
    }
    .huixian{
            width: 100%;
            background: #303030;
            height: 1%;
    }
    .xiala{
        margin-top: r(50);
        color: #7f7f7f;
        position: relative;
        .gimc_1{
            display: inline-block;
            vertical-align: middle;
            padding-left: r(40);
        }
        .xiangrou{
            margin-top: r(80);
            position: relative;
//          display: inline-block;
//          position: absolute;
//          right: r(4);
//          top: r(-1);
            overflow: hidden;
            .gimc_2{
               padding-left: 40%;
               margin-top: 1%;
               font-size: r(30);
            }
            img{
                height: r(60);
                width: r(60);
                
            }
        }
    }
    .xiangrou input[type="checkbox"]:checked~div {
    height: r(150);
//  transform: translateY(0);
//  z-index: 999;
}

.xiangrou>div{
    
    
    width: 100%;
    height: r(50);
    overflow: hidden;
    background: black;
    transition: all 1s;
//  transform: translateY(-100%);
//  position: absolute;
//  top: 0;
}
.xiangrou label{
   position: absolute;
   top: r(-12);
   right: r(5);
}
.xiangrou input[type="checkbox"] {
    display: none;
    visibility: hidden;
    height: 0;
    width: 0;
}
     ///
       .foot_2{
        width: r(150);
        height: r(40);
        background: #b60005;
        color: white;
        font-size: r(25);
        border-radius:r(18);
        text-align: center;
        margin: 0 auto;
        margin-top: r(80);
        
    }
    .hei{
         margin-top: r(90);
    }
}
